<template>
  <view class="page">
    <view :style="{ height:statusBarHeight+'px' }"></view>
    <view class="title_container">
      <view class="title">消息</view>
    </view>
    <view class="item_wrap">
      <view class="nodata" v-if="fileList.length==0 &&!isLoading">
        <image class="no_data_img" src="../../static/images/blank.png"></image>
        <text class="no_data_text">暂无数据</text>
      </view>
      <view class="card" v-for="(item,index) in fileList" :key="index" @click="onItemClick(item)">
        <view class="row_container">
          <view class="title">消息类型提醒</view>
          <veiw class="date_text">{{timestampToTime(item.gmtCreate)}}</veiw>
        </view>
        <view class="row_container">
          <view class="moel_message"> {{getMessageText(item.messageType)}}</view>
          <image class="image" src="../../static/inspection/right_arrow.png"></image>
        </view>
      </view>
    </view>

  </view>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { useMemberStore } from '@/stores';
  import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
  import { getMessageList } from '@/services/home';

  const userInfo : any = useMemberStore().getUserInfo()
  //记载中
  const isLoading = ref(true)
  const fileList = ref<any[]>([])
  const dictTypeCode = 2
  const statusBarHeight = ref(0)

  onLoad(() => {
    //获取状态栏高度
    const systemInfo : any = uni.getSystemInfoSync()
    statusBarHeight.value = systemInfo.statusBarHeight | 20

    isLoading.value = false
    getMessageList({ userCode: userInfo.userCode }).then((res : any) => {
      fileList.value = res.list
      isLoading.value = false
    }).catch(e => {
      isLoading.value = false
      console.log(e)
    })
  })
  //下拉
  onPullDownRefresh(() => {
    getMessageList({ userCode: userInfo.userCode }).then((res : any) => {
      fileList.value = res.list
      isLoading.value = false
    }).catch(e => {
      isLoading.value = false
      console.log(e)
    })
  })
  const getMessageText = (messageType : string) => {
    //字典表 类型 1.手册 2.文件 3.视频 4.海报 5.效果图 6.设计方案 7.商品 8.模版任务
    if (messageType == '1') {
      return '有新的文件已更新，快去看看吧'
    } else if (messageType == '2') {
      return '有新的文件已更新，快去看看吧'
    } else if (messageType == '3') {
      return '有一条视频已更新，快去看看吧'
    } else if (messageType == '4') {
      return '有一条海报已更新，快去看看吧'
    } else if (messageType == '5') {
      return '有一条效果图已更新，快去看看吧'
    } else if (messageType == '6') {
      return '有一条设计方案已更新，快去看看吧'
    } else if (messageType == '7') {
      return '有一条商品已更新，快去看看吧'
    } else if (messageType == '8') {
      return '您有一模版任务需要处理，请尽快去执行吧'
    } else {
      return '您有一条新的消息，快去看看吧'
    }
  }
  //后退
  const naviBack = () => {
    uni.navigateBack()
  }
  // 时间戳：1637244864707
  /* 时间戳转换为时间 */
  const timestampToTime = (timestamp : number) => {

    let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
    let Y = date.getFullYear() + '-';
    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
    let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
    let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
    let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
    return Y + M + D + h + m + s;
  }




  //跳转详情
  const onItemClick = (item : any) => {
    console.log(item.messageType)
    if (item.messageType == '8') {
      //跳转模版任务
      uni.navigateTo({
        url: '/pagesMember/inspection/pendingtask'
      })
    } else {
      if (Func.isEmpty(item.fileUrl)) {
        uni.showToast({
          title: '链接不能为空'
        })
        return
      }
      uni.navigateTo({
        url: `/pagesMember/mediaPreview/mediaPreview?data=${JSON.stringify({
          fileCtype: item.fileCtype,
          fileUrl: item.fileUrl,
          fileCode: item.fileCode,
          dictTypeCode,
          showOption: true
        })}`
      })
    }


  }
</script>

<style>
  .page {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .item_wrap {
    background: #f5f6f6;
    flex-grow: 1;
  }

  .title_container {
    height: 88rpx;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0rpx 15rpx;
    margin-bottom: 12rpx;
  }

  .title {
    height: 44rpx;
    font-weight: 500;
    font-size: 34rpx;
    color: #1C253A;
    line-height: 44rpx;
    text-align: left;
    font-weight: bold;
    text-transform: none;
  }

  .back {
    font-size: 30rpx;
  }

  .moel_message {
    height: 40rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #394259;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .back_img {
    width: 40rpx;
    height: 40rpx;
  }

  .card {
    margin-left: 20rpx;
    margin-right: 20rpx;
    margin-top: 20rpx;
    padding: 20rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    display: flex;
    flex-direction: column;
  }

  .row_container {
    flex-grow: 1;
    margin-top: 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }



  .title {
    height: 40rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 40rpx;
    text-align: justified;
    font-style: normal;
    text-transform: none;
  }

  .content {
    height: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #394259;
    font-weight: 500;
    line-height: 28rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .date_text {
    height: 40rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #888E98;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .image {
    width: 36rpx;
    height: 36rpx;
  }

  .nodata {
    display: flex;
    height: 80vh;
    align-items: center;
    flex-direction: column;

  }

  .no_data_img {
    margin-top: 25vh;
    height: 84rpx;
    width: 100rpx;
  }

  .no_data_text {
    margin-top: 30rpx;
    color: darkgray;
  }
</style>
